<template>
  <div class='question-container'>
    <el-card>
      <!-- 按钮 -->
      <div  class="btn_wrapper">
        <el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
      </div>
      <!-- 栅格 -->
    <el-form  label-width="80px">
        <el-row>
         <el-col :span="6">
            <el-form-item label="学科">
              <el-select @change="changeSubject" v-model="requestParams.subjectID" placeholder="请选择"  style="width:100%">
                <el-option
                v-for="item in subjectOptions" :key="item.value"
                :label="item.label" :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="requestParams.catalogID" placeholder="请选择"  style="width:100%">
                <el-option
                v-for="item in catalogOptions" :key="item.value"
                :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="requestParams.tags" placeholder="请选择"  style="width:100%">
                <el-option v-for="item in tagsOptions" :key="item.value"
                :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="requestParams.keyword" style="width:100%"></el-input>
            </el-form-item>
         </el-col>
        </el-row>

        <el-row>
         <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="requestParams.questionType"  placeholder="请选择"  style="width:100%">
                <el-option v-for="item in questionTypeOptions"
                 :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="requestParams.difficulty" placeholder="请选择"  style="width:100%">
                <el-option v-for="item in difficultyOptions"
                :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="requestParams.direction" placeholder="请选择"  style="width:100%">
                <el-option v-for="item in directionOptions"
                :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="6">
            <el-form-item label="录入人">
              <el-select  v-model="requestParams.creatorID" placeholder="请选择"  style="width:100%">
                <el-option v-for="item in creatorIDOptions"
                 :key="item.id" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
         </el-col>
        </el-row>

        <el-row>
         <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="requestParams.remarks" style="width:100%"></el-input>
            </el-form-item>
         </el-col>

         <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="requestParams.shortName" style="width:100%"></el-input>
            </el-form-item>
         </el-col>

         <el-col :span="6">
            <el-form-item label="城市">
              <!-- 城市 -->
              <el-select @change="changeProvince" v-model="requestParams.procince" placeholder="请选择"  style="width:48%;margin-right:2%">
                <el-option v-for="item in ProvinceOptions"
                :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <!-- 地区 -->
               <el-select v-model="requestParams.city" placeholder="请选择"  style="width:50%">
                <el-option v-for="item in cityOptions"
                :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
         </el-col>
         <!-- 按钮 -->
          <el-col :span="6">
            <el-form-item style="text-align:right">
                <el-button @click="clear()">清除</el-button>
                <el-button type="primary" @click="search()">搜索</el-button>
            </el-form-item>
          </el-col>
      </el-row>
     </el-form>

    <!-- alert数据记录 -->
    <el-alert
    :title="`数据一共${total}条`"
    :closable="false"
    style="margin-bottom:15px"
    type="info"
    show-icon>
  </el-alert>

  <!-- 表格 -->
  <el-table :data="questions" style="width: 100%">
      <el-table-column  prop="number"  label="试题编号"></el-table-column>
      <el-table-column  prop="subject"  label="学科"></el-table-column>
      <el-table-column prop="catalog" label="目录"></el-table-column>
       <el-table-column prop="questionType" label="题型">
         <template slot-scope="scope" >
           {{questionType.find(item=>item.value === +scope.row.questionType).label}}
         </template>
      </el-table-column>
       <el-table-column prop="question" label="题干" width="180px">
         <template slot-scope="scope">
           <div v-html="scope.row.question"></div>
         </template>
      </el-table-column>
       <el-table-column prop="addDate" label="录入时间" width="180px">
        <template slot-scope="scope">
          {{scope.row.addDate | parseTimeByString}}
        </template>
       </el-table-column>
       <el-table-column prop="difficulty"  label="难度">
         <template slot-scope="scope">
           {{difficulty.find(item=>item.value === +scope.row.difficulty).label}}
         </template>
      </el-table-column>
       <el-table-column prop="creator"  label="录入人"></el-table-column>
       <el-table-column label="操作" width="180px">
         <template slot-scope="scope">
           <el-button title="预览" icon="el-icon-view" type="primary" circle plain size="small" @click="previewDialog(scope.row)"></el-button>
           <el-button title="修改" icon="el-icon-edit" type="success" circle plain size="small" @click="$router.push(`new?id=${scope.row.id}`)"></el-button>
           <el-button title="删除" icon="el-icon-delete" type="danger" circle plain size="small" @click="delQuestion(scope.row)"></el-button>
           <el-button title="加入精选" icon="el-icon-check" type="warning" circle plain size="small" @click="addQuestion(scope.row)"></el-button>
         </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
       style="text-align:right"
       background
       :total="total"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :page-sizes="[5, 10, 15, 20]"
       :page-size="5"
       layout="prev, pager, next, sizes, jumper">
    </el-pagination>
    </el-card>

    <!-- 预览 -->
    <questions-preview ref="previewRef" :data="questionInfo"></questions-preview>
  </div>
</template>

<script>
import { list as questionList, remove as questionDel, choiceAdd } from '@/api/hmmm/questions.js'
import { simple as subjectList } from '@/api/hmmm/subjects.js'
import { simple as directorysList } from '@/api/hmmm/directorys.js'
import { simple as tagsList } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { simple as userList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'

export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      total: 0, // 总数
      questions: [],
      questionInfo: {},
      questionType,
      difficulty,
      requestParams: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      // 学科选项
      subjectOptions: [],
      // 二级目录选项
      catalogOptions: [],
      // 标签选项
      tagsOptions: [],
      // 试题类型选项
      questionTypeOptions: questionType,
      // 难度
      difficultyOptions: difficulty,
      // 方向
      directionOptions: direction,
      // 录入人下拉选项
      creatorIDOptions: [],
      // 城市下拉框选项
      ProvinceOptions: provinces(),
      // 地区下拉框--选中城市后才赋值
      cityOptions: []

    }
  },
  async created () {
    // 学科下拉选项
    const { data: subjectArr } = await subjectList()
    this.subjectOptions = subjectArr
    // 录入人下拉选项
    const { data: creatorIDArr } = await userList()
    // console.log(creatorIDArr)
    this.creatorIDOptions = creatorIDArr
    // 获取列表
    this.getList()
  },
  methods: {
    // 切换学科时触发---获取标签和目录
    async changeSubject (subjectID) {
      this.requestParams.catalogID = ''
      this.requestParams.tags = ''
      // 判断是否已选择学科
      if (subjectID) {
        // 获取目录
        const { data: directoryArr } = await directorysList({ subjectID })
        // console.log(directoryArr)
        this.catalogOptions = directoryArr
        // 获取标签
        const { data: tagsArr } = await tagsList({ subjectID })
        // console.log(tagsArr)
        this.tagsOptions = tagsArr
      } else {
        this.catalogOptions = ''
        this.tagsOptions = ''
      }
    },
    // 切换城市时---处理地区
    changeProvince (provinceName) {
      // 切换城市时先清空地区
      this.requestParams.city = ''
      this.cityOptions = citys(provinceName)
    },
    // 每页条数
    handleSizeChange (val) {
      this.requestParams.page = 1
      this.requestParams.pagesize = val
      this.getList()
    },
    // 当前页
    handleCurrentChange (val) {
      this.requestParams.page = val
      this.getList()
    },
    // 清除按钮
    clear () {
      for (const k in this.requestParams) {
        if (k !== 'page' && k !== 'pagesize') this.requestParams[k] = ''
      }
    },
    // 搜索按钮
    search () {
      this.requestParams.page = 1
      this.getList()
    },
    // 获取题库列表
    async getList () {
      const { data: questionArr } = await questionList(this.requestParams)
      // console.log(questionArr)
      this.total = questionArr.counts
      this.questions = questionArr.items
    },
    // 删除
    delQuestion (question) {
      // 确认删除
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message.success('删除成功')
        await questionDel(question)
        this.getList()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 加入精选
    addQuestion (question) {
      this.$confirm('此操作会将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        this.$message.success('添加成功')
        const res = await choiceAdd({ id: question.id, choiceState: 1 })
        console.log(res)
        this.getList()
      }).catch(() => {
        this.$message.info('已取消添加')
      })
    },
    // 预览
    previewDialog (questionInfo) {
      this.questionInfo = questionInfo
      // console.log(questionInfo)
      this.$nextTick(() => { this.$refs.previewRef.open() })
    }
  }
}
</script>

<style scoped lang='scss'>
.question-container{
  padding: 0 10px;
  margin: 10px 0;
}
.btn_wrapper{
   margin-bottom: 15px;
  text-align: right;
}
</style>
